<template>
      <div class="order-preview">
        <div class="content">
          <van-loading v-show="isLoading"  class="loading" size="24px" color="#42bBaa" vertical>加载中...</van-loading>
          <div class="address-content">
            <div class="address-wrap" @click="goEditAddress()">

              <div class="wrap" v-if="address">
                <p>{{ address.name }}  {{address.phone}}</p>
                <p>{{address.province}} {{address.city}} {{address.county}} {{address.address}}</p>
              </div>

              <div class="wrap" v-else>
                <p>{{noAddress}}</p>
              </div>

              <van-icon name="arrow" />

         </div>
        </div>

          <div class="good-wrapper">
            <van-card
                v-for="(item,index) in cartList"
                :key="index"
                :num="item.num"
                :price="item.goods.price"
                :title="item.goods.title"
                lazy-load
                :thumb="item.goods.cover_url"
            />

          </div>

<!--          如果为空-->

          <div class="empty-content" v-if="cartList.length === 0">
            <van-empty description="暂无订单" />
          </div>

        <nav-bar>
          <div class="left" slot="left"  @click="goBack()">
            <i class="iconfont icon-fanhui"></i>
          </div>
          <div slot="center">订单预览</div>
        </nav-bar>


        <van-submit-bar
            style="background-color:#eee;"
            :loading="false"
            :price="total"
            :disabled="disabled"
            button-text="生成订单"
            @submit="onSubmit"
        >
          <template class="total-price">
            商品总金额
          </template>
        </van-submit-bar>

          <van-popup
              v-model="show"
              closeable
              :close-on-click-overlay="false"
              close-icon="close"
              round
              @close="close()"
              position="bottom"
              :style="{ height: '40%' }">
            <div class="loading">
              <van-loading type="spinner" color="#42bBaa" v-show="isLoadingCode" />
            </div>
            <van-grid :border="false" :column-num="2" >
              <van-grid-item>
                <span>支付宝二维码</span><br>
                <van-image width="100" height="100" :src="aliyun"/>
              </van-grid-item>
              <van-grid-item>
                <span>微信支付二维码</span><br>
                <van-image width="100" height="100" :src="aliyun"/>
              </van-grid-item>
            </van-grid>


          </van-popup>
      </div>
      </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import {getOrderPreviewData,createOrder,getPayCode,getPayStatus} from "../../api/order/order";
import {mapState} from 'vuex'
import {Toast} from "vant";
export default {
  name: "OrderPreview",
  data(){
    return{
      cartList:[],
      address:{},
      noAddress:'您还没有收货地址，快去设置吧！',
      orderInfo:{},//订单信息
      show:false,
      aliyun:'',
      wechat:'',
      isLoading:true,
      disabled:false,
      isLoadingCode:true
    }
  },
  components:{
    NavBar
  },
  computed:{
    ...mapState(['addressInfo']),
    total(){
      let sum = 0
      this.cartList.forEach(item =>{
        sum += parseInt(item.goods.price ) * item.num * 100
      })
      return sum
    }
  },
  mounted() {
    this.getPreviewOrder()
  },
  methods:{
    async getPreviewOrder(){
      const res = await getOrderPreviewData()
      res && (this.address = res.data.address.filter(item => item.is_default === 1)[0])
      this.cartList = res.data.carts
      if(this.address && this.cartList.length !== 0) {
        this.$store.commit('setUserAddress', this.address)
        this.isLoading = false
        this.disabled = false
        // }
      }else {
        this.disabled = true
        this.isLoading = false
      }
    },
    goEditAddress(){
      this.$router.push({ path:'/addressList' })
    },
    async onSubmit(){
      let params = {
        address_id:this.address.id
      }
      const res = await createOrder(params)
      if(res.status === 200){
        Toast('订单提交成功')
        this.orderInfo = res.data
        this.show = true
        const result_ali = await getPayCode(this.orderInfo.id,'aliyun')
        if(result_ali.data.code === '10000'){
          this.isLoadingCode = false
          this.aliyun = result_ali.data.qr_code_url
        }
        // 轮询获取订单详情
        let timer = setInterval(async()=>{
          const orderDetail = await getPayStatus(this.orderInfo.id)
          if(orderDetail.status === 200 && orderDetail.data === 2){
            clearInterval(timer)
            await this.$router.push({path: 'OrderDetail',params:{orderId:this.orderInfo.id}})
          }
        },3000)
      }
    },

    close(){
        this.$router.push({path:'OrderDetail',query:{orderId:this.orderInfo.id}})
    },
    goBack(){
      this.$router.push({path:'shopCart'})
    }
  }
}
</script>

<style scoped lang="css">
.order-preview{
  height: 100%;
  width: 100%;
}
.content{
  margin-top: 45px;
  padding-bottom: 43px;
}
.left{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.iconfont{
  font-size: 24px;
}
.total-price{
  font-size: 18px;
}
.address-content{
  position: relative;
  padding:10px;
  height: 66px;
}
.address-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.address-content::after{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: -webkit-repeating-linear-gradient(
      135deg
      , #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
  background: repeating-linear-gradient(
      -45deg
      , #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
  background-size: 80px;
  content: '';
}
p{
  margin-top: 7px;
}
.good-wrapper{
  padding-top: 10px;
}
span{
  font-size: 14px;
}
.loading{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
